.table-of-contents {
  font-family: sans-serif;
  line-height: 1.6;
  background-color: #373b52;
  color: #d8dee9;

  .container {
    display: flex;
    justify-content: space-between;
    max-width: 1050px;
    margin: 0 auto;
    padding: 20px;
    .contents {
      flex: 1;
      background-color: #161822;
      border-radius: 8px;
      max-width: 800px;
      padding: 18px;

      h2,h3{
        border: 1px solid orange;
        color: orange;
        text-align: center;
        padding: 5px;
      }
    }

    .toc {
      width: 220px;
      margin: 8px;
      padding: 16px;
      height: calc(100vh - 70px);
      position: sticky;
      top: 50px;
      align-self: flex-start;
      // background-color: antiquewhite;
      li {
        list-style: none;
        padding: 5px 18px;
        color: #a6acc9;
        &:hover,
        &.highlight {
          color: #fff;
        }
      }
    }
  }
}
